<template>
  <view>
    <view :class="['searchBar', { isOn: searchIsOn }]">
      <u-input
        class="inputView"
        :placeholder="holder"
        v-model="searchInputText"
        :placeholder-style="searchPlaceholderStyle"
        @click="searchBarOnBegin"
        @blur="searchBarOnEnd"
        @input="searchBarOnChanged"
        :clearable="false"
        :focus="searchIsFocus"
      />
      <image v-if="!searchIsOn" class="searchIcon" :src="searchBarIcon"></image>
      <view v-else class="clearContainer">
        <!-- <image v-show="searchInputText.length > 0" class="clearIcon" :src="srcInputSearchClose" @click="searchBarOnClear"></image>-->
        <view class="cancelText" @click="searchBarOnCancel">取消</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    holder: {
      type: String,
      default: '关键词搜索',
    },
    keywork: {
      type: String,
      default: '',
    },
  },
  watch: {
    keywork(newValue, oldValue) {
      if (newValue) {
        this.searchInputText = newValue;
      }
    },
  },

  data() {
    return {
      searchBarIcon: this.$imgBaseSelf + 'career/positionDictionary/input_search_icon.webp',
      srcInputSearchClose: this.$imgBaseSelf + 'career/positionDictionary/input_seach_close.webp',
      searchPlaceholderStyle: 'color: rgba(0,0,0,0.25);font-weight:400;font-size:28rpx;',
      searchInputText: '',
      searchIsFocus: false,
      searchIsOn: false,
    };
  },
  methods: {
    // 结束搜索
    searchBarOnEnd() {
      this.searchIsFocus = false;
      this.searchIsOn = false;
    },
    // 开始搜索
    searchBarOnBegin() {
      this.searchIsFocus = true;
      this.searchIsOn = true;
      this.$emit('begin');
    },
    // 取消
    searchBarOnCancel() {
      this.searchInputText = '';
      this.$emit('end');
    },
    // 清空
    searchBarOnClear() {
      this.searchInputText = '';
      this.searchIsFocus = true;
    },
    // 输入变更
    searchBarOnChanged(value) {
      this.$emit('changed', value);
    },
  },
};
</script>

<style lang="scss" scoped>
.isOn {
  background-color: white;
  box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(114, 165, 195, 0.3);
  filter: blur(0px);
}

.searchBar {
  display: flex;
  position: relative;
  height: 80rpx;
  background-color: #f4f6f8;
  border-radius: 16rpx;
  margin: 15rpx 32rpx 4rpx 32rpx;

  .inputView {
    height: 80rpx;
    margin-left: 28rpx;
    display: flex;
    align-items: center;
    width: 100vw; // width: 100%;
    margin-right: 156rpx;
  }

  .searchIcon {
    position: absolute;
    top: 50%;
    right: 28rpx;
    transform: translateY(-50%);
    width: 40rpx;
    height: 40rpx;
  }

  .clearContainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 28rpx;
    transform: translateY(-50%);

    .clearIcon {
      width: 32rpx;
      height: 32rpx;
      margin-right: 20rpx;
    }

    .cancelText {
      font-weight: 400;
      color: #888888;
      line-height: 36rpx;
      font-size: 28rpx;
      margin-left: 12rpx;
    }
  }
}
</style>
